<template>
	<view>
		<u-gap height="30"></u-gap>
		<uni-card>
			<view class="box-1" id="list-box">
				<view class="talk-list">
					<view class="item flex_col push">
						<image :src="pushPic" mode="aspectFill" class="pic"></image>
						<view class="content">{{push}}</view>
					</view>
					<view class="item flex_col pull">
						<image :src="pullPic" mode="aspectFill" class="pic"></image>
						<view class="content">{{pull}}</view>
					</view>
				</view>
			</view>
		</uni-card>
		<view style="margin-top: -20px;">
			<uni-card title="反馈">
				<view style="margin-bottom: 6px;">请对以上对话进行评分</view>
				<uni-rate :size="30" v-model="rate"></uni-rate>
				<view style="margin-top: 10px;margin-bottom: 5px;">反馈理由</view>
				<u--textarea v-model="feedback" placeholder="请输入内容(非必填)"></u--textarea>
				<button style="margin-top: 20px;margin-bottom: 5px;" type="primary" @click="submit()">提交</button>
			</uni-card>
		</view>
		<u-notify ref="uNotify"></u-notify>
	</view>
</template>

<script>
	import {
		submitFeedback
	} from '../../services/feedback/feedback.js'
	export default {
		data() {
			return {
				token: "",
				push: "",
				pull: "",
				pushPic: "",
				pullPic: "",
				rate: 3,
				feedback: ""
			}
		},
		onLoad: function(option) {
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('acceptDataFromOpenerPage', (res) => {
				this.token = res.data.token
				this.push = res.data.push
				this.pull = res.data.pull
				this.pushPic = res.data.pushPic
				this.pullPic = res.data.pullPic
			})
		},
		mounted() {
			this.$refs.uNotify.show({
				message: "进入反馈界面",
				type: "success"
			})
		},
		methods: {
			submit() {
				let obj = {
					token: this.token,
					rate: this.rate,
					feedback: this.feedback,
					userQuestion: this.push,
					robbitAnswer: this.pull
				}
				submitFeedback(obj).then((res) => {
					if (res.message == "反馈成功") {
						this.$refs.uNotify.show({
							message: "反馈成功",
							type: "success"
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1200)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.box-1 {
		width: 103%;
		height: auto;
		padding-bottom: 0;
		box-sizing: content-box;

		/* 兼容iPhoneX */
		margin-bottom: 0;
		margin-bottom: constant(safe-area-inset-bottom);
		margin-bottom: env(safe-area-inset-bottom);
	}

	.talk-list {
		padding-bottom: 20rpx;
		position: relative;

		/* 消息项 */
		.item {
			position: relative;
			padding: 20rpx 0 0 0;
			align-items: flex-start;
			align-content: flex-start;
			color: #333;

			.pic {
				width: 92rpx;
				height: 92rpx;
				border-radius: 50%;
				border: #fff solid 1px;
			}

			.content {
				padding: 20rpx;
				border-radius: 4px;
				max-width: 500rpx;
				word-break: break-all;
				line-height: 52rpx;
				position: relative;
			}

			/* 收到的消息 */
			&.pull {
				margin-left: -20rpx;

				.content {
					margin-left: 32rpx;
					background-color: #a0e959;

					&::after {
						content: '';
						display: block;
						width: 0;
						height: 0;
						border-top: 16rpx solid transparent;
						border-bottom: 16rpx solid transparent;
						border-right: 20rpx solid #a0e959;
						position: absolute;
						top: 30rpx;
						left: -18rpx;
					}
				}
			}

			/* 发出的消息 */
			&.push {
				/* 主轴为水平方向，起点在右端。使不修改DOM结构，也能改变元素排列顺序 */
				flex-direction: row-reverse;

				.content {
					margin-right: 32rpx;
					background-color: #a0e959;

					&::after {
						content: '';
						display: block;
						width: 0;
						height: 0;
						border-top: 16rpx solid transparent;
						border-bottom: 16rpx solid transparent;
						border-left: 20rpx solid #a0e959;
						position: absolute;
						top: 30rpx;
						right: -18rpx;
					}
				}
			}
		}
	}
</style>
